<template>
    <div class="fillcontain">
        <Header/>

        <section class="data_section" style="padding: 20px;">

            <div class="search">
                <el-form :inline="true" :model="query" class="demo-form-inline">
                    <el-form-item label="用户名">
                        <el-input v-model="query.name" placeholder="大纲名称" @keyup.enter.native="getOutlines()"></el-input>
                    </el-form-item>
                    <el-form-item label="年级">
                        <el-select v-model="query['grade.id']" placeholder="年级" @change="getOutlines">
                            <el-option v-for="g in grades" :label="g.name" :value="g.id" :key="g.id"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="课程">
                        <el-select v-model="query['course.id']"
                                   filterable remote
                                   reserve-keyword placeholder="请输入课程名称"
                                   :remote-method="searchCourse"
                                   :loading="searchForm.course.loading">
                            <el-option
                                v-for="item in searchForm.course.options"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="getOutlines()">查询</el-button>
                    </el-form-item>
                </el-form>
            </div>

            <el-table
                :data="tableData"
                highlight-current-row
                style="width: 100%">
                <el-table-column type="index" width="100"></el-table-column>
                <el-table-column property="name" label="名称" width="170px"></el-table-column>
                <el-table-column property="course.name" label="课程" width="150px"></el-table-column>
                <el-table-column property="course.grade.name" label="年级" width="150px"></el-table-column>
                <el-table-column property="state" width="200px" label="状态"></el-table-column>
                <el-table-column label="操作" width="100">
                    <template slot-scope="scope">
                        <el-button @click="handleDetailClick(scope.row)" type="text" size="small">查看</el-button>
                        <el-button @click="handlePassClick(scope.row, scope.$index, tableData)" type="text" size="" icon="el-icon-check"></el-button>
                        <!--            <el-button type="text" size="small">编辑</el-button>-->
                    </template>
                </el-table-column>
            </el-table>
            <div class="Pagination" style="text-align: left;margin-top: 10px;">
                <el-pagination
                    @current-change="handleCurrentChange"
                    :current-page="query.page"
                    :page-size="query.size"
                    layout="total, prev, pager, next"
                    :total="count">
                </el-pagination>
            </div>

        </section>

        <el-dialog title="修改用户信息" :visible.sync="dialogFormVisible">
            <div style="">
                <el-table
                    :data="selectRow" style="width: 800px;margin-bottom: 20px;"
                    border row-key="num">
                    <el-table-column prop="num" label="序号" sortable width="180"></el-table-column>
                    <el-table-column prop="name" label="章节" sortable width="230"></el-table-column>
                    <el-table-column prop="intro" label="介绍" width="300"></el-table-column>
                </el-table>

            </div>
        </el-dialog>
    </div>
</template>

<script>
    import Header from '@/components/Header'
    import Footer from '@/components/Footer'
    import {getGrades, getOutlineById, getOutlineCount, getOutlineList, passOutline, searchCouse} from "../api/getData";

    export default {
        name: "OutlineList",
        components: {Header, Footer},
        data(){
            return{
                query: {page: 1, size: 5, loginName:'', status:false},
                count:0,
                tableData: [{
                    name: 'java',
                    course: {name:'java'},
                    grade: {name:'大学'},
                    status: '待审核',
                }],
                dialogFormVisible:false,
                selectRow:[],
                // search
                grades:[],
                // search course
                searchForm:{course:{loading:false,options:[]}}
            }
        },
        created(){
            this.getOutlines();
            this.init();
        },
        methods:{
            async init(){
                const Grades = await getGrades();
                if(Grades.data.code == 0){
                    this.grades = Grades.data.data;
                }
            },
            async getOutlines() {
                const countRes = await getOutlineCount(this.query);
                if (countRes.data.code == 0) {
                    this.count = countRes.data.data;
                }

                const Users = await getOutlineList(this.query);
                this.tableData = [];
                if(Users.data.data.content.length==0){
                    return;
                }
                Users.data.data.content.forEach(item => {
                    const tableData = {};
                    tableData.id = item.id;
                    tableData.content = item.content;
                    tableData.name = item.name;
                    tableData.course = item.course;
                    tableData.grade = item.grade;
                    if (item.status) {
                        tableData.state = '已审核';
                    } else {
                        tableData.state = '待审核';
                    }
                    this.tableData.push(tableData);
                });
                this.selectRow = this.tableData[0]
            },
            handleCurrentChange(val) {
                this.query.page = val;
                this.getUsers()
            },
            async handleDetailClick(row){
                console.log(row);
                var res = await getOutlineById({id:row.id})
                this.selectRow = res.data.data;
                this.dialogFormVisible = true;
            },
            async searchCourse(query){
                if(query==''){
                    return ;
                }
                this.searchForm.course.options = [];
                this.searchForm.course.loading = true;
                console.log(this.query)
                let gradeId = 0;
                if(this.query['grade.id']){
                    gradeId = this.query['grade.id'];
                }
                // lable: xx省xx市xx区 xx学校
                const Schools = await searchCouse({gradeId: gradeId, name:query})
                if(Schools.data.code == 0){
                    this.searchForm.course.options.push({value:0,
                        label: '全部'})
                    Schools.data.data.forEach(item =>{
                        this.searchForm.course.options.push({value:item.id,label: item.name})
                    });
                }
                // this.searchForm.school.options = [{value: 1, label: 'ssss'}, {value: 2, label: 'ssss'},]
                this.searchForm.course.loading = false;
            },
            async handlePassClick(row, index, rows){
                console.log(row)
                const res = await passOutline({id:row.id});
                if(res.data.code==0){
                    this.$message('审核通过');
                    rows.splice(index,1)
                }
            }
        }
    }
</script>

<style scoped>

</style>
